<script setup>
import { reactive, ref } from 'vue'
import { useAppStore } from '../stores/app.js'
import { parm } from './param'
const appState = useAppStore()
const data = reactive({
  filterValue: '["修改用户名1","修改用户名2"]',
  commentNum: '',
  textareaValue: '["一句话", "第二句", "..."]',
  selectorValue: [],
  isRandom: true,
  praise: '',
  time: ''
})
const collapseState = ref(['1'])
const radioValue = ref(1)


const autoCommentsScript = () => {
  let param = ''
  if (radioValue.value) {
    param = JSON.stringify({
      type: 'network',
      commentsData: data.selectorValue,
      isRandom: data.isRandom,
      commentNum: data.commentNum
    })
  } else {
    param = JSON.stringify({
      type: 'local',
      commentsData: data.textareaValue,
      isRandom: data.isRandom,
      commentNum: data.commentNum
    })
  }
  // local network
  appState.sendAndroid('AndroidStartAutoCommentsScript', param, (data) => {
    if (parseInt(data)) {
      Snackbar('脚本已运行')
    }
  })

}


const cancelVidoeScript = () => {
  appState.sendAndroid('AndroidStartCancelVidoeScript', data.filterValue, (data) => {
    if (parseInt(data)) {
      Snackbar('脚本已运行')
    }
  })
}

const deleCommentsScript = () => {
  let param = JSON.stringify({ praise: data.praise, time: data.time })
  appState.sendAndroid('AndroidStartDeleCommentScript', param, (data) => {
    if (parseInt(data)) {
      Snackbar('脚本已运行')
    }
  })
}

const cancelVidoeUpScript = () => {
  if (appState.app.loading) return
  appState.upScript('cancelVidoe')
}

const deleCommentsUpScript = () => {
  if (appState.app.loading) return
  appState.upScript('deleComments')
}


const goHitokoto = ()=>{
  appState.sendAndroid('AndroidDowApp', 'https://hitokoto.cn')
}
</script>

<template>
  <div class="tiktok">
    <var-card title="自动评论: 需打开评论区" class="card-bg">
      <template #subtitle>
        <div class="card-subtitle">
          网络评论使用的是 一言网 API 进行获取数据，一言网目前属于公益性运营，请大家不要过度使用，大家可以了解一下<span @click="goHitokoto" style="color:blue">https://hitokoto.cn/</span>
        </div>
      </template>
      <template #description>
        <div class="card-content">
          <var-input placeholder='评论次数: 空，为无数次' type="number" variant="outlined" v-model="data.commentNum" />
          <var-radio-group v-model="radioValue">
            <var-radio :checked-value="0">本地</var-radio>
            <var-radio :checked-value="1">网络</var-radio>
          </var-radio-group>
          <div v-if="!radioValue">
            <var-input placeholder='请输入过滤用户名 例：["一句话", "第二句"]' variant="outlined" textarea v-model="data.textareaValue" />
            <var-radio v-model="data.isRandom">是否随机</var-radio>
          </div>
          <var-collapse v-else v-model="collapseState" :elevation="false">
            <var-collapse-item title="类型列表" name="1">
              <var-checkbox-group v-model="data.selectorValue">
                <var-checkbox v-for="item in parm" :key="item.value" :checked-value="item.value">{{ item.name
                }}</var-checkbox>
              </var-checkbox-group>
            </var-collapse-item>
          </var-collapse>
          <div class="btn-box">
            <var-button class="btn" type="primary">更新</var-button>
            <var-button class="btn" type="primary" @click="autoCommentsScript">启动</var-button>
          </div>
        </div>
      </template>
    </var-card>
    <var-card title="取消喜欢视频：无需" class="card-bg">
      <template #description>
        <div class="card-content">
          <var-input placeholder='请输入过滤用户名 例：["张三", "李四"]' variant="outlined" v-model="data.filterValue" />
          <div class="btn-box">
            <var-button class="btn" type="primary" @click="cancelVidoeUpScript">更新</var-button>
            <var-button class="btn" type="primary" @click="cancelVidoeScript">启动</var-button>
          </div>
        </div>
      </template>
    </var-card>
    <var-card title="删除评论：需打开评论区">
      <template #description>
        <div class="card-content">
          <var-input placeholder="请输入最小过滤点赞 例：520" type="number" variant="outlined" v-model="data.praise" />
          <p>说明：评论点赞数，当输入数值时，将删除点赞数小于数值的评论</p>
          <var-input placeholder="请输入过滤日期 例：" v-model="data.time" variant="outlined" />
          <p>
            说明：评论日期，当输入数值时，将删除输入日期以及往后日期。 例：输入 6.13 将删除
            2023.6.13 及往后日期评论
          </p>
          <div class="btn-box">
            <var-button class="btn" type="primary" @click="deleCommentsUpScript">更新</var-button>
            <var-button class="btn" type="primary" @click="deleCommentsScript">启动</var-button>
          </div>

          <p>1. 当点赞、日期为空时，将删除每一条评论</p>
          <p>2. 当点赞为空，则只匹配日期，反之为点赞</p>
          <p>3.当点赞、日期都不为空时，将删除满足两个条件的评论</p>
          <p>4. 需先打开评论区后启动脚本</p>
        </div>
      </template>
    </var-card>
  </div>
</template>

<style lang="scss" scoped>
.tiktok {
  padding: 20px;

  .var-card {
    margin: 10px 0;
    opacity: 0.7;

    .card-subtitle {
      padding: 10px;
      font-size: 12px;
    }

    .btn-box {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      .btn {
        width: 30%;
      }
    }
  }
}
</style>
